<!--
 * @Description: 工单详情
 * @Author: charles
 * @Date: 2021-12-14 22:10:42
 * @LastEditors: charles
 * @LastEditTime: 2021-12-14 22:10:43
-->
<template>
  <div class="detail-container">
    <!-- 返回按钮 -->
    <el-page-header
      @back="$router.go(-1)"
      content="工程详细页面"
      class="header"
    ></el-page-header>

    <!-- 显示工程详细信息 -->
    <el-card class="detail-card" v-if="ordObj">
      <div slot="header" class="card-header">
        <span>工程详细信息</span>
      </div>
      <div class="detail-content">
        <p><strong>工程ID:</strong> {{ ordObj.id }}</p>
        <p><strong>工程名称:</strong> {{ ordObj.engineer_name }}</p>
        <p><strong>设备名称:</strong> {{ ordObj.device_name }}</p>
        <p><strong>问题描述:</strong> {{ ordObj.bill_why }}</p>
        <!--使用el-tag组件根据工单状态显示不同颜色的标签-->
        <p>
          <strong>状态:</strong>
          <el-tag v-if="ordObj.status == '待接单'" type="danger">{{
            ordObj.status
          }}</el-tag>
          <el-tag v-else-if="ordObj.status == '进行中'" type="warning">{{
            ordObj.status
          }}</el-tag>
          <el-tag v-else-if="ordObj.status == '已完成'" type="success">{{
            ordObj.status
          }}</el-tag>
        </p>
        <p><strong>工单类型:</strong> {{ ordObj.type }}</p>
        <p><strong>创建时间:</strong> {{ ordObj.create_time }}</p>
        <p><strong>结束时间:</strong> {{ ordObj.finish_time }}</p>
        <p><strong>账户名称:</strong> {{ ordObj.account_name }}</p>
        <p><strong>账户ID:</strong> {{ ordObj.account_id }}</p>
        <p><strong>开始照片:</strong> {{ ordObj.begin_photos }}</p>
        <p><strong>结束照片:</strong> {{ ordObj.end_photos }}</p>
      </div>
    </el-card>

    <!-- 如果没有数据 -->
    <el-empty
      v-else
      description="无法加载工程详细信息"
      class="empty-container"
    ></el-empty>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 接受从列表页传递过来的数据
      ordObj: {},
    };
  },
  created() {
    // 从路由查询参数中获取数据
    this.ordObj = this.$route.query;

    // 可选：打印接收到的数据用于调试
    console.log("接收到的数据:", this.ordObj);
  },
};
</script>

<style lang="scss" scoped>
.detail-container {
  padding: 20px;
  .header {
    margin-bottom: 20px;
  }
  .detail-card {
    .card-header {
      font-size: 18px;
      font-weight: bold;
    }
    .detail-content {
      font-size: 16px;
      line-height: 2;
      p {
        margin-bottom: 10px;
      }
    }
  }
  .empty-container {
    margin-top: 100px;
  }
}
</style>